<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__ADMIN_STATIC__/src/css/daokr.css">
  <link rel="stylesheet" href="__ADMIN_STATIC__/admin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
              <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="daokr-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
        </div>
        
        <table id="daokr-table-box" lay-filter="daokr-table-box"></table>  
        <script type="text/html" id="buttonTpl">
          {{#  if(d.status == 1){ }}
            <button class="layui-btn layui-btn-xs">正常</button>
          {{#  } else { }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">禁用</button>
          {{#  } }}
        </script>

        <script type="text/html" id="table-toolbar-action">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          {{#  if(d.title == '用户' || d.title == '系统管理'){ }}
            <a class="layui-btn layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>
          {{#  } else { }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
          {{#  } }}
        </script>

      </div>
    </div>
  </div>

<script src="__ADMIN_STATIC__/src/daokr.js"></script>  
<script>
  layui.config({
    base: '__ADMIN_STATIC__/admin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

    //监听搜索
    form.on('submit(daokr-back-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('daokr-table-box', {
        where: field
      });
    });

    //渲染表格
    table.render(
    {
        elem: "#daokr-table-box",
        url: "index",
        cols: [[{type: "checkbox",fixed: "left"},
        {
            field: "id",
            width: 100,
            title: "ID",
            sort: !0
        },
        {
            field: "name",
            title: "菜单URL",
        },
        {
            field: "title",
            title: "名称",
        },
        {
            field: "css",
            title: "样式",
            width: 100,
        },
        {
            field: "sort",
            title: "排序",
            width: 80,
        },
        {
            field: "status",
            title: "状态",
            templet: "#buttonTpl",
            width: 100,
        },
        {
            title: "操作",
            width: 180,
            align: "center",
            fixed: "right",
            toolbar: "#table-toolbar-action"
        }]],
        //page: !0,
        //limit: 10,
        height: "full-220",
        text: "对不起，加载出现异常！"
    });

    //监听表格事件
    table.on('tool(daokr-table-box)',function(obj){
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if(layEvent=='edit'){
          //同步更新缓存对应的值
          layer.open({
              type: 2
              ,title: '编辑菜单'
              ,content: 'edit?id='+data.id
              ,area: ['420px', '420px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                  var iframeWindow = window['layui-layer-iframe'+ index]
                  ,submitID = 'daokr-back-submit'
                  ,submit = layero.find('iframe').contents().find('#'+ submitID);

                  //监听提交
                  iframeWindow.layui.form.on('submit('+submitID+')', function(formdata){
                    var field = formdata.field; //获取提交的字段
                    // //提交 Ajax 成功后，静态更新表格中的数据
                    $.ajax({
                            url:'edit?id='+data.id,
                            type:'post',
                            data:field,
                            success:function(res){
                                if(res.code==0){
                                    table.reload('daokr-table-box'); //数据刷新
                                    layer.close(index); //关闭弹层
                                }
                                layer.msg(res.msg);  
                            }
                    });
                  
                  });                      
                  submit.trigger('click');
              }
          }); 
        }else if(layEvent=='del'){
          layer.confirm('真的删除行么', function(index){
            //向服务端发送删除指令
            // //提交 Ajax 成功后，静态更新表格中的数据
            $.ajax({
                    url:'del?id='+data.id,
                    type:'post',
                    data:{id:data.id},
                    success:function(res){
                        if(res.code==0){
                          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                          layer.close(index);
                        }
                        layer.msg(res.msg);  
                    }
            });
          });
        }
    });

    //页面元素
    var active = {
        add: function(){
            //添加
            layer.open({
                type: 2
                ,title: '添加菜单'
                ,content: 'add'
                ,area: ['420px', '420px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'daokr-back-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit('+submitID+')', function(data){
                      var field = data.field; //获取提交的字段
                      // //提交 Ajax 成功后，静态更新表格中的数据
                      $.ajax({
                              url:'add',
                              type:'post',
                              data:field,
                              success:function(res){
                                  if(res.code==0){
                                      table.reload('daokr-table-box'); //数据刷新
                                      layer.close(index); //关闭弹层
                                  }
                                  layer.msg(res.msg);  
                              }
                      });
                    
                    });                      
                    submit.trigger('click');
                }
            }); 

        },
        batchdel:function(){
          //数据检查
          var checkStatus = table.checkStatus('daokr-table-box'),
              checkData = checkStatus.data; //得到选中的数据

          if(checkData.length === 0){
            return layer.msg('请选择数据');
          }

          //批量删除
          layer.confirm('确定删除吗？', function(index) {
            //执行 Ajax 批量删除
            var ids = "";
            for(var i=0;i<checkData.length;i++){
              if(i>0){
                ids += ","+checkData[i].id;
              }else{
                ids += checkData[i].id;
              }
            }
            $.ajax({
            	      url:'del',
                  	type:'post',
                  	data:{id:ids},
                  	success:function(res){
                      if(res.code==0){
                              table.reload('daokr-table-box'); //数据刷新
                              layer.close(index); //关闭弹层
                      }
                		  layer.msg(res.msg);  
                  	}
            });
          });    

        }
    };

    //批量页面添加事件
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  </script>
</body>
</html>

